<template>
    <view class="live-waition-page">
        <image class="live-waition-page__cover" src="/static/images/liveWaiting/01.png" mode="" />
        <view class="live-info">
            <view class="live-info__top">
                <view class="live-info__tag">预告</view>
                <view class="live-info__date">10/16</view>
                <view class="live-info__time">19:00-21:00</view>
            </view>
            <view class="live-info__mid">
                <view class="live-info__title">开封三部大戏即将亮相省戏剧大赛舞台</view>
            </view>
            <view class="live-info__btm">
                <view class="live-info__btmblock">
                    <img class="live-info__btmicon" src="/static/images/wlj.png" alt="">
                    <text class="video-list-item__posterlabel">开封文旅局</text>
                </view>
                <view class="live-info__btmblock">
                    <img class="live-info__btmicon" src="/static/images/veryLike.png" alt="">
                    <text class="live-info__likelabel">17</text>
                </view>
            </view>
        </view>
        <view class="live-content"> 2021年10月16日，“舞台艺术结硕果，献礼建党一百年”第十五届河南省戏剧大赛将在驻马店隆重开幕。省戏剧大赛是河南省专业艺术最高赛事，每三年一届。开封市文广旅局高 度重视，积极组织豫剧现代戏《党的女儿》《老屋》、杂技剧《槐树爷爷》参加此次大赛。通过大赛，培养锻炼我市文艺队伍，展示舞台艺术创作新成果，用精品力作向中国共产党成立100周年献礼。</view>
        <view class="live-footer">
            <view class="live-last-time">
                开播倒计时：<text>10</text>天<text>7</text>时<text>58</text>分<text>12</text>秒
            </view>
            <view class="live-button">
                直播未开始
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.live-waition-page {
    padding-bottom: 210upx;
    &__cover {
        width: 100%;
        height: 400upx;
    }
}

.live-info {
    padding: 32upx 24upx;
}
.live-info__top {
    display: flex;
    align-items: center;
}
.live-info__tag {
    display: inline-block;
    border-radius: 5px;
    padding: 8upx 16upx;
    background: #e38434;
    color: #fff;
}
.live-info__date {
    font-size: 48upx;
    color: #333333;
    margin: 0 32upx 0 20upx;
}
.live-info__time {
    font-size: 32upx;
    color: #333333;
}

.live-info__title {
    font-size: 32upx;
    color: #333333;
    margin: 30upx 0;
}

.live-info__btm,
.live-info__btmblock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24upx;
    color: #676767;
}
.live-info__btmicon {
    width: 30upx;
    height: 30upx;
    margin-right: 10upx;
}
.live-info__likelabel {
    color: #e38434;
}

.live-content {
    border-top: 16upx solid #f4f4f4;
    padding: 30upx;
    font-size: 28upx;
    color: #676767;
}
.live-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 0 17px rgba(37, 37, 37, 0.18);
    padding: 40upx 24upx 10upx;
    background: #fff;
}
.live-last-time {
    font-size: 32upx;
    color: rgba(51, 51, 51, 1);
    text {
        color: rgba(227, 132, 52, 1);
    }
}
.live-button {
    border-radius: 5px;
    font-size: 32upx;
    background: rgba(227, 132, 52, 1);
    color: #fff;
    padding: 24upx;
    margin-top: 28upx;
}
</style>